<template>
  <div class="detail">
    <el-dialog :title="formData.title" v-model="open" width="900px" @open="initOpen" :before-close="close"
      append-to-body @close="close">
      <el-row class="detail-header">
        <el-form ref="detailRef" :model="form" :rules="rules" label-width="180px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="省" prop="dkpProvinceId">
                <el-select v-model="form.dkpProvinceId" placeholder="请选择省" @change="chooseFormProvince"
                  :disabled="isEdit" style="width: 100%;">
                  <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="市" prop="dkpCityId">
                <el-select v-model="form.dkpCityId" placeholder="请选择市" @change="chooseFormCity" :disabled="isEdit"
                  style="width: 100%;">
                  <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="区/县" prop="dkpPrefectureId">
                <el-select v-model="form.dkpPrefectureId" placeholder="请选择区/县" :disabled="isEdit" style="width: 100%;">
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重大工程基础设施类型" prop="dkpKeyType">
                <el-select v-model="form.dkpKeyType" placeholder="请选择" @change="resetChangeForm"
                  :disabled="isEdit || isUpdate" style="width: 100%;">
                  <el-option v-for="(key, val) in optionCode['dkpKeyType']" :key="key" :label="key" :value="val">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider border-style="dashed"></el-divider>
          <div v-show="form.dkpKeyType" v-loading="formLoading">
            <ol class="detail-info" v-show="form.dkpKeyType == '0'">
              <li>核电厂、核热电厂、核供汽供热厂、核能海水淡化厂等核动力厂及装置，以及浮动核动力装置的 系泊装换料船坞、码头。</li>
              <li>核动力厂以外的研究堆、实验堆、临界装置等其他反应堆。</li>
              <li>核燃料生产、加工、贮存和后处理设施等核燃料循环设施。</li>
              <li>涉及放射性废液贮存、处理设施；涉及高水平放射性废物的处置、贮存、处置设施。</li>
              <li>受地震破坏后可能引发严重放射性物质污染的涉核设施。</li>
            </ol>
            <ol v-show="form.dkpKeyType == '1'">
              <li>坝高超过200m或库容大于100亿m3的大（1）型工程，以及基本地震动峰值加速度分区0.10g及以上地区的坝高超过150m大（1）型工程。</li>
              <li>基本地震动峰值加速度分区0.10g及以上地区的高度为90m以上的1级、2级大坝，抽水蓄能电站I等工程的主要建筑物和引水、调水工程中的重要建筑物。</li>
              <li>场址区5km范围内有晚更新世（10万年）以来活动断层通过的1级、2级和3级大坝</li>
            </ol>
            <ol v-show="form.dkpKeyType == '2'">
              <li>穿越或临近晚更新世（10万年）以来活动断层，或位于基本地震动峰值加速度0.10g及以上地区的油气干线输送管道。</li>
              <li>《石油化工钢制设备抗震设计规范》规定的公称容积大于等于30000m3的立式圆筒形储罐和高度大于80m的裙座式直立设备。</li>
              <li>其他有特殊需要的高危石油化工工程。</li>
            </ol>
            <ol v-show="form.dkpKeyType == '3'">
              <li>独立特长隧道工程、越江隧道、海底隧道。</li>
              <li>跨度大于150m或其它技术复杂、修复困难的铁路桥梁。</li>
              <li>在城市轨道交通网络中占据关键地位、承担交通量大的大跨度桥梁和车站的主体结构。</li>
              <li>城市道路中悬索桥、斜拉桥以及跨度大于150m的拱桥。</li>
              <li>国际或国内主要干线机场的航管楼。</li>
            </ol>
            <ol v-show="form.dkpKeyType == '4'">
              <li>科学实验建筑中，研究、中试生产和存放具有高放射性物品以及剧毒的生物制品、化学制品、天然和人工细菌、病毒(如鼠疫、霍乱、伤寒和新发高危险传染病等)的建筑。</li>
              <li>大型风洞设施、大型射电望远镜等有特殊需要的科学实验和重大科学装置工程</li>
            </ol>
            <ol v-show="form.dkpKeyType == '5'">
              <li>省、自治区、直辖市认为对本行政区域有重大战略影响的其他基础设施。</li>
            </ol>
            <div v-show="isTransport">
              <el-row>
                <el-col>
                  <el-form-item label="交通运输工程类型" prop="dkpTransType" :rules="{ required: isTransport, message: '请选择交通运输工程类型！', trigger: 'change' }">
                    <el-select v-model="form.dkpTransType" placeholder="请选择" :disabled="isEdit" style="width: 100%;"
                      @click="resetChangeForm">
                      <el-option v-for="(key, val) in optionCode['dkpTransType']" :key="key" :label="key" :value="val">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-show="!isTransport || form.dkpTransType != ''">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="工程名称" prop="dkpName" label-width="100px">
                    <el-input v-model="form.dkpName" placeholder="请输入工程名称" :disabled="isEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="类型" prop="dkpType" label-width="100px">
                    <el-input v-model="form.dkpType" placeholder="请输入类型" :disabled="isEdit" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="位置" prop="dkpLocation" label-width="100px">
                    <el-input v-model="form.dkpLocation" placeholder="请输入位置" :disabled="isEdit" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-show="formItemFlag == 0">
                <el-col>
                  <el-form-item label="长度" prop="dkpLong" label-width="100px" :rules="{ required: formItemFlag == 0, message: '请输入长度！', trigger: 'blur' }">
                    <el-input v-model="form.dkpLong" placeholder="请输入长度" :disabled="isEdit" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-show="formItemFlag == 2">
                <el-col>
                  <el-form-item label="规模" prop="dkpScale" label-width="100px" :rules="{ required: formItemFlag == 2, message: '请输入规模！', trigger: 'blur' }">
                    <el-input v-model="form.dkpScale" placeholder="请输入规模" :disabled="isEdit" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-show="formItemFlag == 1">
                <el-col>
                  <el-form-item label="跨度" prop="dkpSpan" label-width="100px" :rules="{ required: formItemFlag == 1, message: '请输入跨度！', trigger: 'blur' }">
                    <el-input v-model="form.dkpSpan" placeholder="请输入跨度" :disabled="isEdit" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="建造年代" prop="dkpYear" label-width="100px">
                    <el-select v-model="form.dkpYear" placeholder="请选择" :disabled="isEdit" style="width: 100%;">
                      <el-option v-for="(key, val) in optionCode['dkpYear']" :key="key" :label="key" :value="val">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-show="isFlag">
                <el-col>
                  <el-form-item label="设防情况" prop="dkpCondition" label-width="100px" :rules="{ required: isFlag, message: '请填写设防情况！', trigger: 'change' }">
                    <el-select v-model="form.dkpCondition" placeholder="请选择" :disabled="isEdit" style="width: 100%;">
                      <el-option v-for="(key, val) in optionCode['dkpCondition']" :key="key" :label="key" :value="val">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-show="isFlag">
                <el-col>
                  <el-form-item label="使用现状" prop="dkpActuality" label-width="100px" :rules="{ required: isFlag, message: '请输入使用现状！', trigger: 'blur' }">
                    <el-input v-model="form.dkpActuality" placeholder="请输入使用现状" :disabled="isEdit" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </el-row>
      <template #footer v-if="isView">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button plain @click="close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { saveDkp, updateDkp, getKeyProject } from '@/api/basedatamanage/majorProject'
import { useMajorProjectStore } from '@/store/modules/majorProject'
// import { nextTick } from 'process';
import { getCurrentInstance, nextTick } from "vue";
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  curId: {
    type: String
  },
  isDisabled: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:open', 'getList', 'update:isDisabled', 'update:curId']);
const optionCode = {
  'dkpKeyType': { '0': '核工程', '1': '水利水电工程', '2': '石油化工工程', '3': '交通运输工程', '4': '科学实验和重大科学装置工程', '5': '其他' },
  'dkpTransType': {
    '0': '独立特长隧道工程、越江隧道、海底隧道',
    '1': '跨度大于150m或其它技术复杂、修复困难的铁路桥梁',
    '2': '在城市轨道交通网络中占据关键地位、承担交通量大的大跨度桥梁和车站的主体结构',
    '3': '城市道路中悬索桥、斜拉桥以及跨度大于150m的拱桥',
    '4': '国际或国内主要干线机场的航管楼'
  },
  'dkpYear': {
    '70年代前': '70年代前', '70年代': '70年代', '80年代': '80年代', '90年代': '90年代',
    '00年代': '00年代', '10年代': '10年代', '20年代': '20年代',
  },
  'dkpCondition': { '未设防': '未设防', '6度': '6度', '7度': '7度', '8度': '8度', '9度': '9度' }
}

const formData = reactive({
  title: '新增重大工程基础设施',
  form: {
    dkpProvinceId: '',
    dkpPrefectureId: '',
    dkpCityId: '',
    dkpKeyType: '',
    dkpName: '',
    dkpLocation: '',
    dkpType: '',
    dkpScale: '',
    dkpSpan: '',
    dkpLong: '',
    dkpCondition: '',
    dkpYear: '',
    dkpActuality: '',
    dkpTransType: ''
  },
  rules: {
    dkpProvinceId: [{ required: true, message: '请选择省！', trigger: 'change' }],
    dkpCityId: [{ required: true, message: '请选择市！', trigger: 'change' }],
    dkpPrefectureId: [{ required: true, message: '请选择区/县！', trigger: 'change' }],
    dkpKeyType: [{ required: true, message: '请选择重大工程基础设施类型！', trigger: 'change' }],
    dkpName: [{ required: true, message: '请输入工程名称！', trigger: 'blur' }],
    dkpLocation: [{ required: true, message: '请输入位置！', trigger: 'blur' }],
    dkpType: [{ required: true, message: '请输入类型！', trigger: 'blur' }],
    dkpYear: [{ required: true, message: '请输入建造年代！', trigger: 'blur' }]
  }
})
const { form, rules } = toRefs(formData)

const isEdit = ref(false)

const detailRef = ref()

const isUpdate = ref(false)

const isView = ref(true)

const formLoading = ref(false)

const initOpen = () => {
  isEdit.value = props.isDisabled
  isUpdate.value = false
  if (props.curId) {
    getKeyProjectDetail(props.curId)
  }
  // 修改
  if (props.curId && props.isDisabled == false) {
    isUpdate.value = true
  }
  // 查看
  if (props.curId && props.isDisabled == true) {
    isView.value = false
  }
}

// 省市区
const majorProject = useMajorProjectStore()
const { provinceData } = storeToRefs(majorProject)
const { getCityData, getAreaData } = majorProject
const cityData = ref([]);//表单市
const areaData = ref([]);//表单区、县

const chooseFormProvince = async (value) => {
  formData.form.dkpCityId = null;
  formData.form.dkpPrefectureId = null;
  cityData.value = [];
  areaData.value = [];
  cityData.value = await getCityData(value)
}

const chooseFormCity = async (value) => {
  formData.form.dkpPrefectureId = null;
  areaData.value = [];
  areaData.value = await getAreaData(value)
}

// 交通运输工程未选择
const isTransport = computed(() => {
  return form.value.dkpKeyType == '3'
})
// 跨度、长度、规模
const formItemFlag = computed(() => {
  let formItem
  let { dkpKeyType, dkpTransType } = form.value
  let dkpKeyTypeScale = ['1', '2', '4', '5']
  let dkpTransTypeScale = ['2', '4']

  if (dkpKeyTypeScale.includes(dkpKeyType)) {
    formItem = 2;
  } else if (dkpKeyType == '3') {
    if (dkpTransTypeScale.includes(dkpTransType)) {
      formItem = 2;
    } else if (dkpTransType == '0') {
      formItem = 0;
    } else if (dkpTransType == '1' || dkpTransType == '3') {
      formItem = 1;
    }
  }
  return formItem
})
// 设防情况、使用现状
const isFlag = computed(() => {
  let formItem
  switch (form.value.dkpKeyType) {
    case '0':
    case '1':
    case '2':
    case '3':
      formItem = true;
      break;
    default:
      break;
  }
  return formItem
})
// 切换重大工程基础设施类型、交通运输工程类型时清空
const resetChangeForm = () => {
  const { dkpProvinceId, dkpPrefectureId, dkpCityId, dkpKeyType } = form.value
  proxy.resetForm('detailRef')
  form.value.dkpProvinceId = dkpProvinceId
  form.value.dkpCityId = dkpCityId
  form.value.dkpPrefectureId = dkpPrefectureId
  form.value.dkpKeyType = dkpKeyType
}

// 保存、修改
const submitForm = () => {
  detailRef.value.validate((valid, fields) => {
    if (valid) {
      // 修改时，重大工程基础设施类型禁掉
      if (props.curId) {
        updateDkp(form.value).then(res => {
          const { code } = res
          if (code == 200) {
            emits('update:open', false)
            emits('getList')
          }
        })
      } else {
        saveDkp(form.value).then(res => {
          const { code } = res
          if (code == 200) {
            emits('update:open', false)
            emits('getList')
          }
        })
      }
    }
  })
}

// 取消
const { proxy } = getCurrentInstance()
const close = () => {
  proxy.resetForm('detailRef')
  isView.value = true
  emits('update:open', false)
  emits('update:isDisabled', false)
  emits('update:curId', '')
}

// 查询详情
const getKeyProjectDetail = async (id) => {
  formLoading.value = true
  let res = await getKeyProject(id)
  if (res.code == 200) {
    formLoading.value = false
    form.value = res.data
    const { dkpProvinceId, dkpCityId } = res.data
    cityData.value = await getCityData(dkpProvinceId)
    areaData.value = await getAreaData(dkpCityId)
  }
}
</script>
<style scoped lang="scss">
.detail {
  &-header {
    padding-top: 20px;
  }

  &-info {
    padding-bottom: 20px;
  }
}
</style>